import WaterTarget from "@/components/devCard/waterTarget"
import {DeviceStatusIcon, IconImg} from "@/components/images"
import {CItem} from "@/components/item"
import AllowRight from "@/components/others/allowRight"
import {imagesUrl} from "@/utils/baseUrl"
import {devStatus2Color} from "@/utils/common"
import {toAllAbnormal, toSettingAccess} from "@/utils/pageRedirect"
import {Text, View} from "@tarojs/components"
import Taro from "@tarojs/taro"

const handleAddress = (province: string, city: string, district: string) => {
	let p = province === "N/A" || !province ? null : province
	let c = city === "N/A" || !city ? null : city
	let d = district === "N/A" || !district ? null : district
	if (!p && !c && !d) {
		return "暂未设置地址"
	} else if (!p || !c || !d) {
		return `${p || "-- "}- ${c || "-- "}- ${d || "-- "}`
	} else {
		return `${p}-${c}-${d}`
	}
}

/* 仪表盘卡片 */
export const DevStatusCard: React.FC<{
	detailPack: SettingStore.DetailPack
	devListShowType: SettingStore.DevListShowType
	changeDevListShowType: (data: SettingStore.DevListShowType) => void
}> = ({detailPack, devListShowType, changeDevListShowType}): JSX.Element => {
	return (
		<View className="w-full px-16">
			<View className="w-full p-16 bg-white rounded-12 flex items-center">
				<WaterTarget
					style={{width: "160rpx", height: "160rpx"}}
					borderColor="#1DC79C"
					lightBorderColor="rgba(29, 199, 156, 0.2)"
					textColor="#1DC79C"
					value={detailPack.standRangeRatio}
					valueStyle={{
						fontSize: "64rpx"
					}}
				></WaterTarget>
				<View className="flex-1 h-full pl-16 pt-8">
					<View className="mb-8">
						<Text className="hanzi text-16 font-bold mr-10">设备运行状态</Text>
						<View
							className="hanzi inline-block text-16 font-bold"
							style={{
								color: devStatus2Color(detailPack.devRunStatus) + " !important"
							}}
						>
							{detailPack.devRunStatus || "---"}
						</View>
					</View>
					<View className="mb-4 hanzi text-12 truncate text-x_text">
						当前{" "}
						<Text className="font-bold text-x_text">{detailPack.devCount || 0}</Text>{" "}
						台设备
					</View>

					<View className="hanzi text-12 truncate text-x_text">
						累计检测 {detailPack.totalCheckHour || 0} 小时
					</View>
					<View className="hanzi text-12 truncate text-x_text flex items-center justify-end">
						{/* {devListShowType === "config" ? (
							<Text
								className=" font-bold text-x_text"
								onClick={() => changeDevListShowType("analyze")}
							>
								设备分析列表
							</Text>
						) : null} */}
						{devListShowType === "analyze" ? (
							<Text
								className="mr-2 font-bold text-x_text"
								onClick={() => changeDevListShowType("config")}
							>
								设备配置列表
							</Text>
						) : null}
						{/* <IconImg imgName="allowRight" width={24} height={26}></IconImg> */}
					</View>
				</View>
			</View>
		</View>
	)
}

/* 异常卡片 */
export const DevAbnormalCard: React.FC<{
	devAbnormalCount?: number
	devCount: number
}> = ({devAbnormalCount, devCount}): JSX.Element => {
	return (
		<View
			className="w-full px-16 mt-24 "
			onClick={() => {
				if (devCount) {
					toAllAbnormal()
				} else {
					Taro.showModal({
						content: "目前暂无设备"
					})
				}
			}}
		>
			<CItem
				posIcon={<AllowRight count={devAbnormalCount}></AllowRight>}
				style={{
					height: "112rpx",
					justifyContent: "space-between",
					backgroundColor: "#fff",
					borderRadius: "24rpx",
					padding: "36rpx 32rpx !important"
				}}
			>
				<View className="hanzi text-14 font-bold">
					异常记录<Text className="text-xxx_text">（所有设备）</Text>
				</View>
			</CItem>
		</View>
	)
}

/**设备配置卡片 设置页用 */
export const SettingDevCardByConfig: React.FC<{
	devSetPack: Setting.MyDevSetPack
}> = ({devSetPack}): JSX.Element => {
	return (
		<View
			className="w-full rounded-12 p-16 mb-10 bg-white overflow-hidden"
			style={{
				backgroundImage: `url(${imagesUrl}setting-devCard-bg.png)`,
				backgroundSize: "280rpx 72rpx",
				backgroundRepeat: "no-repeat"
			}}
			onClick={() => {
				console.log("devSetPack.isManage", devSetPack)

				toSettingAccess({
					devId: devSetPack.devId,
					isManage: devSetPack.isManage
				})
			}}
		>
			{/* 头部 设备名称 设备状态 */}
			<View className="h-20 mb-12 flex justify-between items-center">
				<View className="flex-1 text-14 font-bold">{devSetPack.devName}</View>
				<View className="flex items-center">
					<DeviceStatusIcon status={devSetPack.devStatus}></DeviceStatusIcon>
					<Text className="text-14 ml-4 font-bold">{devSetPack.devStatus}</Text>
				</View>
			</View>

			{/* 内容 设备内某些参数的配置 */}
			<View className="mb-6">
				<View className="flex items-center mb-6">
					<View className="hanzi text-12 text-x_text mr-30">合格标准</View>
					<View className="hanzi flex-1 text-12 text-xx_text">
						{devSetPack.standRangeStatus}
					</View>
				</View>
				<View className="flex items-center mb-6">
					<View className="hanzi text-12 text-x_text mr-30">报警配置</View>
					<View className="hanzi flex-1 text-12 text-xx_text">
						{devSetPack.reportStatus}
					</View>
				</View>
				<View className="flex items-center mb-6">
					<View className="hanzi text-12 text-x_text mr-30">采集频率</View>
					<View className="hanzi flex-1 text-12 text-xx_text">
						{devSetPack.collectRate}
					</View>
				</View>
				<View className="flex items-center mb-6">
					<View className="hanzi text-12 text-x_text mr-30">采集开关</View>
					<View className="notHanzi flex-1 text-12 text-xx_text">
						{devSetPack.dataSwitchStatus}
					</View>
				</View>
			</View>

			{/* 底部 更新时间 设备地址 设备标识*/}
			{/* <View className="">
				<View className="text-11 text-right text-xxx_text mb-3">{`${
					devSetPack.updateTime ? "更新 " + devSetPack.updateTime : "暂无更新时间"
				}  ${handleAddress(
					devSetPack.province,
					devSetPack.city,
					devSetPack.district
				)}`}</View>
				<View className="text-11 text-right text-x_text">{devSetPack.beLongUser}</View>
			</View> */}
		</View>
	)
}

/**设备状态卡片 设置页用 */
export const SettingDevCardByAnalyze: React.FC<{
	devSetPack: Setting.MyDevSetPack
}> = ({devSetPack}): JSX.Element => {
	return (
		<View
			className="w-full rounded-12 p-16 mb-10 bg-white overflow-hidden"
			style={{
				backgroundImage: `url(${imagesUrl}setting-devCard-bg.png)`,
				backgroundSize: "280rpx 72rpx",
				backgroundRepeat: "no-repeat",
				boxShadow: "0px 0px 12rpx 0px rgba(242,242,242,1)"
			}}
			onClick={() =>
				toSettingAccess({
					devId: devSetPack.devId,
					isManage: devSetPack.isManage
				})
			}
		>
			{/* 头部 设备名称 设备状态 */}
			<View className="h-20 mb-12 flex justify-between items-center">
				<View className="flex-1 text-14 font-bold">{devSetPack.devName}</View>
				<View className="flex items-center">
					<DeviceStatusIcon status={devSetPack.devStatus}></DeviceStatusIcon>
					<Text className="text-14 ml-4 font-bold">{devSetPack.devStatus}</Text>
				</View>
			</View>

			{/* 内容 设备在线率以及参数合格率的配置 */}
			<View className="mb-16 flex items-center">
				<WaterTarget
					value={devSetPack.onlineRatio}
					showLightBorder={false}
					showPercent={true}
					borderColor="#1DC79C"
					style={{
						width: "84rpx",
						height: "84rpx"
					}}
					valueStyle={{
						fontSize: "24rpx",
						color: "#1DC79C !important"
					}}
				></WaterTarget>
				<View className="text-12 text-x_text ml-4 mr-30">在线时长占比</View>
				<WaterTarget
					value={devSetPack.standRangeRatio}
					showLightBorder={false}
					showPercent={true}
					borderColor="#1DC79C"
					style={{
						width: "84rpx",
						height: "84rpx"
					}}
					valueStyle={{
						fontSize: "24rpx",
						color: "#1DC79C !important"
					}}
				></WaterTarget>
				<View className="text-12 text-x_text ml-4">监测正常占比</View>
			</View>

			{/* 底部 更新时间 设备地址 设备标识*/}
			<View className="flex justify-end items-center">
				<View className="text-11 text-xxx_text mr-16">
					{handleAddress(devSetPack.province, devSetPack.city, devSetPack.district)}
				</View>
				<View className="text-11 text-xx_text"> {devSetPack.beLongUser}</View>
			</View>
		</View>
	)
}
